{% block sw_snippet_field_edit_modal %}
<sw-modal
    class="sw-snippet-field-edit-modal"
    :title="modalTitle"
    :is-loading="isLoading"
    @modal-close="closeModal"
>
    {% block sw_snippet_field_edit_modal_body %}
    {% block sw_snippet_field_edit_modal_name_field %}

    <mt-text-field
        :model-value="translationKey"
        disabled
        :label="$tc('global.sw-snippet-field-edit-modal.labelName')"
    />
    {% endblock %}
    {% block sw_snippet_field_edit_modal_snippet_fields %}
    <template v-if="textField">

        <mt-text-field
            v-for="(snippet, index) in editableSnippets"
            :key="snippet.setId"
            v-model="snippet.value"
            v-tooltip.bottom="getNoPermissionsTooltip('snippet.editor')"
            class="sw-snippet-field-edit-modal__translation-field"
            :class="`sw-snippet-field-edit-modal__translation-field--${index}`"
            :disabled="!acl.can('snippet.editor')"
            :label="$tc('sw-settings-snippet.detail.labelContent', { name: snippetSets.get(snippet.setId).name }, 0)"
            :placeholder="snippet.origin || $tc('sw-settings-snippet.general.placeholderValue')"
        />
    </template>

    <template v-else-if="textArea">
        <mt-textarea
            v-for="(snippet, index) in editableSnippets"
            :key="snippet.setId"
            v-model="snippet.value"
            v-tooltip.bottom="getNoPermissionsTooltip('snippet.editor')"
            class="sw-snippet-field-edit-modal__translation-field"
            :class="`sw-snippet-field-edit-modal__translation-field--${index}`"
            :disabled="!acl.can('snippet.editor')"
            :label="$tc('sw-settings-snippet.detail.labelContent', { name: snippetSets.get(snippet.setId).name }, 0)"
            :placeholder="snippet.origin || $tc('sw-settings-snippet.general.placeholderValue')"
        />
    </template>
    {% endblock %}
    {% endblock %}

    <template #modal-footer>
        {% block sw_snippet_field_edit_modal_footer %}
        {% block sw_snippet_field_edit_modal_close_button %}
        <mt-button
            size="small"
            variant="secondary"
            @click="closeModal"
        >
            {{ $tc('global.sw-modal.labelClose') }}
        </mt-button>
        {% endblock %}
        {% block sw_snippet_field_edit_modal_footer_button %}
        <mt-button
            v-tooltip="getNoPermissionsTooltip('snippet.editor')"
            class="sw-snippet-field-edit-modal__save-action"
            size="small"
            variant="primary"
            :disabled="!acl.can('snippet.editor')"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </mt-button>
        {% endblock %}
        {% endblock %}
    </template>
</sw-modal>
{% endblock %}
